<!-- 企业选择弹窗 -->
<template>
  <u-popup :modelValue="show" mode="top"
    :customStyle="{ top: `${popTop}px !important`, width: '100%', left: '50%', transform: 'translateX(-50%) !important' }"
    :scrollCustomStyle="{ 'max-height': `${maxHeight}px !important` }" :maskZoom="false" duration="200" border-radius="12"
    @close="emit('close')">
    <view class="society-pop_wrap px-4 py-4">
      <scroll-view class="whitespace-nowrap max-h-600" scroll-y :show-scrollbar="false">
        <view class=" bg-white rounded-md flex items-center py-3 border-bottom">
          <u-image width="64" height="64" border-radius="12" :src="currentClub.club.cover_image" />
          <view class="c-#333 text-28 text-single ml-2 flex-1">{{ currentClub.club.club_name }}</view>
          <view @click.stop="onSocietyEnter(currentClub)" class="btn-enter flex-shrink-0">进入学社</view>
        </view>
        <view v-for="(item, index) in state.societySwitchList" :key="index"
          class=" bg-white rounded-md flex items-center py-3 border-bottom">
          <u-image width="64" height="64" border-radius="12" :src="item.club?.cover_image" />
          <view class="c-#333 text-28 text-single ml-2 flex-1">{{ item.club?.club_name }}</view>
          <view @click.stop="onSocietyEnter(item)" class="btn-enter flex-shrink-0">进入学社</view>
          <view class="btn-change ml-4 flex-shrink-0" @click.stop="onSocietyChange(item)">切换学社</view>
        </view>
      </scroll-view>
      <view @click="emit('close')" class="c-#F4AF22 text-24 pt-4 flex items-center justify-center">收起
        <u-icon class="ml-1" name="arrow-up" color="#F4AF22" />
      </view>
    </view>
  </u-popup>
</template>

<script setup name="society-pop">
import { getSocietySwitchList } from '@/common/http/module/society.js'
import { useUserStore } from '@/store/user';

const userStore = useUserStore()
const emit = defineEmits(['switch', 'close','enter']);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  club_id: [Number, String]
});

const state = reactive({
  societySwitchList: [] // 切换学社列表
})

const currentClub = computed(() => userStore.currentSociety)

const sysInfo = uni.getSystemInfoSync()
// 需要给定一个弹窗最大高度，否则会顶到最下面，而且会无法滑动，造成显示不全
const maxHeight = sysInfo.windowHeight - 160
const popTop = uni.getMenuButtonBoundingClientRect().bottom + 4

// 切换学社
function onSocietyChange(item) {
  emit('switch', item)
  loadData(item.club_id)
}
//进入学社
function onSocietyEnter(item){
  emit('enter', item)
  loadData(item.club_id)
}

// 获取切换学社列表
async function loadData(club_id) {
  const { data } = await getSocietySwitchList(club_id)
  state.societySwitchList = data
}

onMounted(() => {
  loadData(props.club_id)
})
</script>

<style lang="scss" scoped>
.society-pop_wrap {
  position: relative;
  background-color: #fff;
  box-shadow: -16px 2px 6px 0px rgba(206, 143, 12, 0.3);
  // max-height: 575rpx;

  /* .society-item {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  /* } */
}

.border-bottom {
  border-bottom: 2rpx solid #eeeeee;
}

.u-drawer__scroll-view {
  height: 700rpx;
}

.btn-enter {
  border-radius: 10rpx;
  background-color: #FFFFFF;
  border: 2rpx solid #F4AF22;
  color: #F4AF22;
  font-size: 24rpx;
  padding: 16rpx 20rpx;
}

.btn-change {
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #FFFFFF;
  font-size: 24rpx;
  padding: 16rpx 20rpx;
  border: 2rpx solid #F4AF22;
}
</style>
